
*{
    margin:0px;
    padding: 0px;
}
.App{
    width:100%;
    height: 1000px;
    background-color: black;
}

/* 头部动画 */
.header{
    position: relative;

    width: 100%;
    height: 35%;
    /* height: 70%; */
    /* background: url(../public/sky2.jpg) no-repeat; */
    overflow: hidden;
    /* border: 1px solid #fff; */
    .video-box{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 70%;
        z-index: 0;
        opacity: 0.6;
        border-radius: 150%;
          /* 添加模糊效果 */
        filter: blur(5px); /* 调整模糊程度 */

        /* 使用遮罩实现渐变模糊边缘效果 */
        mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);

    }
    /* 打印容器 */
   .typerwriter-container{
        display: flex;
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        height: 50px;
        font-family:Arial, sans-serif ;
        font-size: 20px;
        color: #fff;
        opacity: 0.8;
        /* border: 1px solid #fff; */
   }
   /* 文字 */
   .text-overlay{
        /* display: inline-block; */
        line-height: 1.5;
   }
   /* 打印游标 */
   .typerwriter-cursor{
    
        display: inline-block;
        width: 15px;
        height: 5px;
        background-color: #fff;
        animation: blind 0.7s infinite;
        vertical-align: bottom;
    
   }
   
   
}


/* 中部动画 */
.middle{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 13%;
    /* color: #fff; */
    color: black;
    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    /* border: 1px solid #fff; */
    /* 中间盒子 */
    .middle-box{
        /* width: 160px; */
        width: 115px;
        height:70px;
        margin-right: 2px;
        text-align: center;
        /* line-height: 70px; */
        line-height: 20px;
        /* border: 1px solid #fff; */
       box-shadow: 0px 0px 20px #ace7ef;
        /* background-color: #F38181; */
        border-radius: 20px;
        opacity: 0.5;
        transition: all .5s ease;
    }
    .middle-box img{
            background: url(./public/boluo.png);
    }
   .middle-box:hover{
        /* transform: translate(130px,0); */
        width: 200px;
        line-height: 70px;
        opacity: 1;
        border-radius: 20px;
        background-position: 40px !important;
        box-shadow: 0px 0px 3px #ace7ef;
   }
   /* 选择第n个元素 */
   .middle-box:nth-child(1){
        background: url(./public/huolongguo.png) no-repeat ;
        background-size: 30px;
        background-position: center;
        background-color: #a6acec;

   }
   .middle-box:nth-child(2){
       
        background: url(./public/boluo.png) no-repeat ;
        background-size: 30px;
        background-position: center;
        background-color: #ace7ef;
   }
   .middle-box:nth-child(3){
        background: url(./public/lanmei.png) no-repeat ;
        background-size: 30px;
        background-position:  center;
        background-color: #cefff1;
   }
   
}
/* .middle::after{
    content: "woshixiaohuihui";
    color: #fff;
} */
/* 尾部评论 */
.bottom{

}
/* 光标闪动动画 */
@keyframes blind {
    /* from{
       opacity:0;
    }
    to{
       opacity: 1;
    } */
     0%{
       opacity: 0;
     }
     50%{
       opacity: 1;
     }
     100%{
       opacity: 0;
     }
}
 